/* === DESKTOP: Horizontal Scroll with 6 Cards per Page === */
.cards-scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Firefox */
}

.cards-scroll-container::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

/* Each "page" (6 cards = 3x2 grid) */
.cards-page {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 1.5rem;
    scroll-snap-align: start;
    padding: 0 1rem;
    box-sizing: border-box;
}

/* === MOBILE: stack all cards vertically === */
@media (max-width: 768px) {
    .cards-scroll-container {
        display: block;
        overflow-x: hidden;
    }

    .cards-page {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        padding: 0;
    }
}